import { Component, Vue, Watch } from 'vue-property-decorator'
import style from './AuthorizeNew.less'
import ApplicationTable from '@/modules/applicationTable'
import SealDrawer from '@/modules/sealDrawer'
import { Action } from 'vuex-class'
import { Route } from 'vue-router'
Component.registerHooks(['beforeRouteLeave'])

@Component({})
export default class AuthorizeOthers extends Vue {
  private loading: boolean = false
  private projectId: string = ''
  private projectName: string = ''
  private footerHeight: number = 46
  private selectApp: any[] = []
  private selectSeals: any[] = []
  drawer: boolean = false

  @Action('project/copyAuthorizeManageSeal')
  private copyAuthorizeManageSeal!: any

  protected render() {
    return (
      <div class={style.flex}>
        <p class={style.tips}>请选择需要同步印章的其他应用</p>
        <ApplicationTable
          onSelectChange={(val: any[]) => {
            this.selectApp = val
            this.getPaddingBottom()
          }}
          multi
          showDriver
          selection={this.selectApp}
          class={style.orderList}
          style={{
            top: '20px',
            height: `calc(100% - 20px - ${this.footerHeight}px)`,
          }}
          onDetail={this.projectDetail}
        />
        <div class={style.pagination} ref="footer">
          <div class={style.selection}>
            <p class={style.tagName}>
              <i class="el-icon-info" />
              已选择印章
            </p>
            <div class={style.tags}>
              <el-button type="text" onClick={this.detail}>
                点击查看
              </el-button>
            </div>
          </div>

          <div class={style.selection}>
            <p class={style.tagName}>已选择应用</p>
            <div class={style.tags}>
              {this.selectApp &&
                this.selectApp.map((tag: any) => (
                  <el-tag
                    key={tag.projectId}
                    closable
                    disable-transitions={false}
                    onClose={() => this.deleteApp(tag)}
                  >
                    {tag.projectName}
                  </el-tag>
                ))}
            </div>
          </div>

          <div class={style.operations}>
            <el-button
              type="primary"
              class={['bg-color-blue', { [style.medium]: true }]}
              disabled={this.loading || this.selectApp.length === 0}
              onClick={this.next}
            >
              确认授权
            </el-button>
          </div>
        </div>
        <SealDrawer
          visible={this.drawer}
          title="已选印章"
          project={{ projectId: this.projectId, projectName: this.projectName }}
          {...{
            on: {
              'update:visible': (val: boolean) => {
                this.drawer = val
              },
            },
          }}
        />
      </div>
    )
  }

  @Watch('active')
  activeChange(val: number) {
    this.getPaddingBottom()
  }

  visibleChange(val: boolean) {
    this.drawer = val
  }

  created() {
    this.projectId = (this.$route.query.id as string) || ''
    this.projectName = (this.$route.query.id as string) || ''
  }
  mounted() {
    this.getPaddingBottom()
  }
  detail() {
    this.drawer = true
  }

  getPaddingBottom() {
    this.$nextTick(() => {
      this.footerHeight = (
        (this.$refs.footer as any) || { offsetHeight: 46 }
      ).offsetHeight
    })
  }

  projectDetail(row: any) {
    this.$router.push({
      name: 'projectDetail',
      query: { id: row.projectId },
    })
  }

  deleteApp(app: any) {
    this.selectApp = this.selectApp.filter(
      (select: any) => app.projectId !== select.projectId
    )
  }

  beforeRouteLeave(to: Route, from: Route, next: any) {
    if (
      (to.name !== 'first' || !to.query.login) &&
      to.name !== 'authorizeResult'
    ) {
      this.$confirm('当前操作未完成，确认退出？', '注意', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        closeOnPressEscape: false,
        closeOnClickModal: false,
        customClass: 'custom-confirm',
      })
        .then(() => {
          next()
        })
        .catch(() => {
          next(false)
        })
    } else {
      next()
    }
  }

  next() {
    // 同步授权应用
    const projectIds = this.selectApp.map(app => app.projectId)
    if (projectIds.length === 0) {
      this.$message.warning('请选择需要同步印章的其他应用')

      return
    }
    this.loading = true
    this.copyAuthorizeManageSeal({
      copyProjectId: this.projectId,
      projectIds,
    })
      .then((res: any) => {
        this.loading = false
        this.$router.push({
          name: 'authorizeResult',
        })
      })
      .catch(() => {
        this.loading = false
      })
  }
}
